<template>
  <div>
    <Topnav titleTExt="栏目管理" />
    <div class="content">
      <p class="desc">点击删除以下频道</p>
      <div class="list">
        <div
          class="item"
          v-for="(item, index) in arrUp"
          :key="index"
          @click="handelDel(item, index)"
          :class="['关注', '头条'].includes(item.name) ? 'active' : ''"
        >
          {{ item.name }}
        </div>
      </div>
      <p class="desc">点击添加以下频道</p>
      <div class="list">
        <div
          class="item"
          v-for="(item, index) in arrDown"
          :key="index"
          @click="handelAdd(item, index)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Topnav from "@/components/Topnav";
export default {
  data() {
    return {
      // 显示在上面的数组
      arrUp: [],
      // 显示在下面的数据
      arrDown: [],
    };
  },
  components: {
    Topnav,
  },
  watch: {
    arrUp() {
      localStorage.setItem("arrUp", JSON.stringify(this.arrUp));
    },
    arrDown() {
      localStorage.setItem("arrDown", JSON.stringify(this.arrDown));
    },
  },
  created() {
    const arrUp = localStorage.getItem("arrUp");
    const arrDown = localStorage.getItem("arrDown");

    if (arrUp || arrDown) {
      this.arrUp = JSON.parse(arrUp);
      this.arrDown = JSON.parse(arrDown);
    } else {
      this.$axios({
        url: "/category",
      }).then((res) => {
        console.log(res.data);
        let categorys = [...res.data.data];
        // 拆分两个数组
        this.arrUp = categorys.filter((item) => {
          return item.is_top === 1;
        });
        this.arrDown = categorys.filter((item) => {
          return item.is_top === 0;
        });
        console.log(this.arrUp, this.arrDown);
      });
    }
  },
  // 删除栏目
  methods: {
    handelDel(item, index) {
      if (["关注", "头条"].includes(item.name)) return;
      console.log(item.name);

      // console.log(item, index);
      this.arrUp.splice(index, 1);
      item.is_top = 0;
      this.arrDown.push(item);
    },
    // 添加栏目
    handelAdd(item, index) {
      this.arrDown.splice(index, 1);
      item.is_top = 1;
      this.arrUp.push(item);
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  padding: 20px;
  .desc {
    font-size: 14px;
    color: #666;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      padding: 5px 10px;
      margin: 10px 0;
      margin-right: 32px;
      border: 1px solid #ccc;
    }
  }
}
.active {
  background-color: #ececec;
  color: #666;
}
</style>
